<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="58%" :with-header="false" :width="700">
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img class="drawer_t_l_img" src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png"
            alt="">
          {{ DialogTitle }}
        </div>
        <img class="drawer_t_r" src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
          @click="drawer = false">
      </div>
      <div class="drawer_c">
        <el-table ref="multipleTable" :data="rightList" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" min-width="3%">
          </el-table-column>
          <el-table-column label="权益名称" min-width="35%">
            <template slot-scope="scope">
              <div class="scope_name">
                <img class="table_img" :src="MainPicturePath(scope)" alt="">
                {{ scope.row.Name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="权益标签" min-width="27%">
            <template slot-scope="scope">
              <div class="scope_label">
                <span v-for="(item, index) in scope.row.EquityFlagList.split('，')" :key="index">{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价" min-width="10%">
            <template slot-scope="scope">
              <div class="scope_price">
                ￥{{ scope.row.CostPrice }}
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="DialogTitle != '添加权益'" label="数量(份)" min-width="15%">
            <template slot-scope="scope">
              <div v-if="DialogTitle == '退款权益'" class="scope_price">1</div>
              <el-input-number v-else v-model="scope.row.AddCount" style="width:12rem;" size="mini" :min="0"
                :max="scope.row.InventoryQuantity"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="金额" min-width="10%">
            <template slot-scope="scope">
              <div class="scope_sum" v-if="DialogTitle == '添加权益'">
                ￥{{ scope.row.CostPrice * 1 }}
              </div>
              <div class="scope_sum" v-else>
                ￥{{ scope.row.CostPrice * scope.row.AddCount }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="drawer_b">
        <div class="drawer_b_r">
          <!-- <div class="drawer_list">
            <el-checkbox v-model="selectAll"></el-checkbox>
            全选
          </div> -->
        </div>
        <div class="drawer_b_r">
          <div class="drawer_list">
            已选择权益: <span>{{ multipleSelection.length }}</span>件
          </div>
          <div class="drawer_list">
            合计: <span>￥{{ totalMoney }}</span>
          </div>
          <span class="drawer_sx" @click="addToFather()">
            确认
          </span>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'bulkBuying',
  props: {
    //  1：实收租金，2：开工面积，3：竣工面积
    DialogTitle: {
      type: String,
      default: '批量收藏',
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    showPay: {
      type: Boolean,
      default: false,
    },
    isOwns: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      navsIndex: 0,
      rightsArr: [],
      drawer: false,
      selectAll: false,
      commodity: [
        {
          id: 1,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,
        }, {
          id: 4,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,

        }, {
          id: 3,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,

        }, {
          id: 2,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,
        }, {
          id: 5,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,
        }, {
          id: 6,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,
        }, , {
          id: 7,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,
        }, {
          id: 8,
          //权益图片
          imgurl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IGJ50bItnx8AeCRM3b7KigHaE8?rs=1&pid=ImgDetMain',
          //权益名称
          name: '上海浦东国际机场-T2行航站楼至东公交车站一张',
          //权益标签
          EquityLabel: '流水班，流水班，俯瞰魔都，流水班，流水班',
          //单价
          unitPrice: 32,
          //数量
          quantity: 1,
          //库存
          inventory: 100,
        }],
      multipleSelection: [],
      rightList: []
      // totalMoney:0,
    };
  },
  mounted() {

  },
  computed: {
    totalMoney() {
      if(this.DialogTitle == '添加权益'){
        return this.multipleSelection.reduce((total, item) => {
        const combinedPrice = item.CostPrice * 1;
        return total + combinedPrice;
      }, 0)
      }else{
        return this.multipleSelection.reduce((total, item) => {
        const combinedPrice = item.unitPrice * item.quantity;
        return total + combinedPrice;
      }, 0)
      }
      
    }
  },
  methods: {
    MainPicturePath(scope){
      try {
        return JSON.parse(scope.row.MainPicturePath)[0].url
      }catch(e) {
        return ""
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose() {
      this.drawer = false
    },
    drawerOp() {
      let o = this
      this.drawer = true
      // 自有权益
      if (this.isOwns == 1) {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1181,
            cellData: [
              { name: "CompanyID" },	// 权益所属公司
              { name: "CostPrice" },	// 平台价格
              { name: "CreateTime" },	// 权益创建时间
              { name: "EffectiveTime" },	// 生效时间
              { name: "EquityFlagList" },	// 权益标签
              { name: "EquityFlagListName" },	// 权益标签中文
              { name: "ExpireTime" },	// 过期时间
              { name: "ID" },	// 权益ID
              { name: "InventoryQuantity" },	// 库存数量
              { name: "MainPicturePath" },	// 主图
              { name: "Name" },	// 权益名称
              { name: "ProductFlagList" },	// 产品标签
              { name: "ProductFlagListName" },	// 产品标签 中文
              { name: "SalePrice" },	// 市场价格
              { name: "SecondaryPicturePath" },	// 副图
              { name: "SoldQuantity" },	// 已售数量
              { name: "Status" },	// 权益状态
              { name: "TransferRuleID" },	// 采购公司限制
              { name: "TransferRuleIDName" },	// 采购公司限制中文
              { name: "TypeID" },	// 权益类型
              { name: "TypeIDName" },	// 权益类型 （中文）
              { name: "AddCount" },	// AddCount
            ],
            paramData: {
              CompanyID: this.octopus.passport.authorization.company == 1 ? 'NULL' : this.octopus.passport.authorization.company
            }
          },
          function (data) {
            if (data.status.code == 200) {
              o.rightList = data.content.queryData
            } else {
              o.octopus.tips.error(data);
            }
          });
      } else {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1182,
            cellData: [
              { name: "CompanyID" },	// 公司ID
              { name: "CostPrice" },	// 平台价格
              { name: "CreateTime" },	// 创建时间
              { name: "EffectiveTime" },	// 生效时间
              { name: "EquityFlagList" },	// 权益标签
              { name: "EquityFlagListName" },	// 权益标签 中文
              { name: "ExpireTime" },	// 过期时间
              { name: "ID" },	// ID
              { name: "InventoryQuantity" },	// 库存数量
              { name: "MainPicturePath" },	// 主图
              { name: "Name" },	// 权益名称
              { name: "ProductFlagList" },	// 产品标签
              { name: "ProductFlagListName" },	// 产品标签 中文
              { name: "SalePrice" },	// 市场价格
              { name: "SecondaryPicturePath" },	// 副图
              { name: "SoldQuantity" },	// 已售数量
              { name: "Status" },	// 权益状态
              { name: "TransferRuleID" },	// 采购公司限制
              { name: "TransferRuleIDName" },	// 采购公司限制中文
              { name: "TypeID" },	// 权益类型ID
              { name: "TypeIDName" },	// 权益类型中文
              { name: "AddCount" },	// AddCount
            ],
            paramData: {
              CompanyID: this.octopus.passport.authorization.company
            }
          },
          function (data) {
            if (data.status.code == 200) {
              o.rightList = data.content.queryData
            } else {
              o.octopus.tips.error(data);
            }
          });
      }
    },
    addToFather() {
      this.$emit('goodsList', this.multipleSelection);
      if (this.showPay) {
        if (this.multipleSelection.length && this.totalMoney > 0) {
          this.$confirm('是否确认购买此权益？', '确认购买', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            // type: 'warning',
            center: true
          }).then(() => {
            this.$parent.fatherMethod();
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消购买'
            });
          });
        } else {
          this.$message({
            type: 'warning',
            message: '请先选择要购买的权益'
          });
        }

      } else if (this.DialogTitle == '退款权益') {
        if (this.multipleSelection.length && this.totalMoney > 0) {
          this.$confirm('是否确认退款此权益？', '确认退款', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            // type: 'warning',
            center: true
          }).then(() => {
            this.$parent.refundDrawer(this.DialogTitle);
          })
        } else {
          this.$message({
            type: 'warning',
            message: '请先选择要退款的权益'
          });
        }
      } else {
        this.drawer = false
      }

    }
  },
};
</script>
<style scoped>
>>>.el-table th>.cell {
  font-weight: bold;
}

>>>.el-table__row {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 设置阴影效果 */
}

>>>.el-table::before {
  display: none;
}

>>>.el-table .el-table__body {
  -webkit-border-vertical-spacing: .8rem;
}

>>>.el-table thead th {
  font-size: 1.6rem;
  color: #575757;
}

>>>.el-table thead th:nth-last-child(2) {
  border-radius: 0 .5rem .5rem 0;
  /* right: 1rem; */
}

>>>.el-table thead th,
>>>.el-table .el-table__row td {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 1.1rem 0;
}

>>>.el-table thead th:first-child,
>>>.el-table .el-table__row td:first-child {
  border-left: 1px solid #EFEFEF;
  border-radius: 5px 0 0 5px;
}

>>>.el-table .el-table__row>td {
  font-size: 1.4rem;
  color: #333333;
}

>>>.el-table .el-table__row>td:last-child {
  border-radius: 0 5px 5px 0;
  right: 1px;
}

>>>.el-table .el-table__body tr:hover>td.el-table__cell {
  background-color: rgba(0, 110, 255, 0.05);
}

>>>.el-table .el-table__fixed::before {
  display: none;
}

>>>.el-table thead {
  color: #1B1917 !important;
  font-size: 1.8rem;

}

>>>.has-gutter tr {
  background: linear-gradient(to right, #FEFEFE, #FBF9F7) !important;
  /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}

>>>.el-table thead th {
  background-color: transparent;
}

>>>.el-table thead th {
  background-color: transparent;
}

>>>.el-input--mini {
  height: 3.5rem;
  line-height: 3.2rem;
}

>>>.el-input-number--mini .el-input-number__decrease {
  width: 3.2rem;
  font-size: 1.8rem;
}

>>>.el-input-number--mini .el-input-number__increase {
  width: 3.2rem;
  font-size: 1.8rem;
}

>>>.el-input-number--mini {
  line-height: 3.2rem;
}

>>>.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #F78C51;
  border-color: #F78C51;
}

>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #F78C51;
  border-color: #F78C51;
}

>>>.el-message-box--center {
  padding-bottom: 0px;
}

.scope_label {
  display: flex;
  flex-wrap: wrap;
}

.scope_name {
  font-size: 1.6rem;
  display: flex;
}

.scope_label span {
  color: #a1a1a1;
  border: 1px solid #d9d9d9;
  padding: 0px .5rem;
  font-size: 1.3rem;
  margin: .3rem;
  border-radius: .5rem
}

.table_img {
  width: 7rem;
  height: 7rem;
  border-radius: 1rem;
  margin-right: 1rem;
}

.scope_sum {
  font-size: 2rem;
  font-weight: bold;
  color: #F19065;
}

.scope_price {
  font-size: 2rem;
  font-weight: bold;
  color: #191916;
}

.drawer_box {
  padding: 3rem .8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  height: 80vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #FDFDFD;
}

.drawer_b {
  height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 1rem;
  width: 100%;
  padding: 0 5rem;
  box-sizing: border-box;
}

.drawer_b_r {
  display: flex;
  align-items: center;
}

.drawer_list {
  margin: 0 1rem;
  font-size: 1.6rem;
}

.drawer_list span {
  color: #F78C51;
  font-weight: bold;
  font-size: 2rem;
  margin: 0 1.3rem;
}

.drawer_sx {
  padding: 1.3rem 5rem;
  background-color: #F78C51;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin-left: 1.3rem;
  cursor: pointer;
}
</style>